<template>
	<view class="">
		<dsl-navbar title="发布动态" bgTopImg="white" isBack></dsl-navbar>
		<view class="issue_body">
			<view class="padding solid-bottom flex align-center rowsb">
				<view>标题</view>
				<input type="text" value="" placeholder="请输入标题"  v-model="title"/>
			</view>
		</view>
		<view class="rowsb padding solid-bottom align-center">
			<view>
				发布类型
			</view>
			<view style="width: 50%;" class="rowsb">
				<view v-for="(item,index) in list" :key='index'>
					<view class="align-center" @click="type = index">
						<view class="margin-right-xs">{{item}}</view>
						<image
							:src="type==index? '/static/plugins/issue/icon_xuanzhong.png' :'/static/plugins/issue/icon_wei.png'"
							class="issue_icon"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="flex align-center rowsb padding solid-bottom">
			<view>
				图片/封面上传
			</view>
			<view class=" radius-sm rowsc align-center" v-if="!uploadImage" style="height: 150rpx;width: 150rpx;"
				@click="upload">
				<image src="/static/plugins/issue/icon_issue.png" mode="widthFix" style="width: 80rpx;"></image>
			</view>
			<image :src="uploadImage" mode="aspectFill" class="radius-sm bg-gray" v-if="uploadImage"
				style="height: 150rpx;width: 150rpx;"></image>
		</view>
		<view class="flex align-center rowsb padding solid-bottom" v-if="type ==1">
			<view>
				视频上传
			</view>
			<view class=" radius-sm rowsc align-center" v-if="!uploadVideo" style="height: 150rpx;width: 150rpx;"
				@click="uploadVideoMen">
				<image src="/static/plugins/issue/icon_issue.png" mode="widthFix" style="width: 80rpx;"></image>
			</view>
			<image :src="uploadVideo" mode="aspectFill" class="radius-sm bg-gray" v-if="uploadVideo"
				style="height: 150rpx;width: 150rpx;"></image>
		</view>
		<view class="submit" @click="submitForm">提交</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import {
		updataImgList,
		upVideo
	} from '@/common/updataImgList.js'
	export default {
		data() {
			return {
				list: ['图片', '视频'],
				type: 0, //默认选中图片
				uploadImage: '', //上传图片路径
				uploadVideo: '', //上传视频路径
				coordinates: '', //经纬度
				title:'',//标题
			}
		},
		//生命周期函数
		onReady() {},
		onShow() {
			this.getLocation()
		},
		methods: {
			/**
			 * postMoments 动态发布
			 */
			...mapActions('dynamic',['postMoments']),
			//获取经纬度
			getLocation() {
				let that = this
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						let coordinates = res.longitude + ',' + res.latitude
						that.coordinates = coordinates
					},
					fail(err) {
						console.log('失败');
					},
				});
			},
			//图片上传
			upload() {
				let v = this
				updataImgList().then(res => {
					if (res.code == 0) {
						console.log('[图片]', res);
						v.uploadImage = res.data
					} else {
						v.tools.showToast('上传失败请重新尝试')
					}
				})
			},
			//视频上传
			uploadVideoMen() {
				upVideo().then(res => {
					if (res.code == 0) {
						console.log('[上传成功]', res);
						this.uploadVideo = res.data
					} else {
						this.tools.showToast('上传失败请重新尝试')
					}
				})
			},
			//提交表单
			submitForm() {
				if(this.title ==''){
					this.$tools.showToast('请填写标题')
					return
				}
				if(this.uploadImage ==''){
					this.$tools.showToast('图片不允许为空')
					return
				}
				this.postMoments({
					  "title": this.title,//标题
 					  "type": this.type, //发布类型
					  "cover":this.uploadImage, //封面 如果是图片的话 只有封面 
					  "attachment": this.uploadVideo, //视频路径
					  "coordinates": this.coordinates ,//经纬度
					  // "location": "人民公园",
				})
			}
		},
		computed: {},
		components: {},
	}
</script>

<style>
	input {
		text-align: right;
	}

	.issue_icon {
		height: 40rpx;
		width: 40rpx;
	}

	.submit {
		background-color: #EAA019;
		color: white;
		padding: 30rpx;
		text-align: center;
		margin: 0 auto;
		margin: 30rpx;
		border-radius: 99rpx;
	}
</style>
